<h2>My Heros</h2>
<!--将badge和名字包裹进<a>，那么通过点击badge也能跳转到某个英雄的详情-->
<div>
    <label>
        Hero name : <input #heroName />
    </label>
    <!--表达式中的上下文是由模板变量，上下文和组件成员叠加而成-->
    <!--#heroName定义模板变量，并且使用heroName.value传入add方法中-->
    <button (click)="add(heroName.value); heroName.value=''">
        add
    </button>
</div>

<ul class="heroes">
    <li *ngFor = "let hero of heroes">
        <a routerLink="/detail/{{hero.id}}">
            <span class="badge">{{hero.id}}</span>{{hero.name}}
        </a>  
        <button class="delete" title="delete hero" (click)="delete(hero)">
            x
        </button>
    </li>
</ul>

<!--把HeroesComponent.selectedHero绑定到该元素的hero属性-->
<!--将父组件中的selectedHero传递给app-hero-detail子组件的hero属性-->
<!-- <app-hero-detail [hero]="selectedHero"></app-hero-detail> -->